<template>
  <div>
    <div class="toolbar-row">
      <el-form inline v-model="queryParam" label-width="80">
        <el-form-item label="选择月份">
          <el-date-picker style="width: 120px" type="month"
                          format="yyyyMM"
                          value-format="yyyyMM"
                          v-model="queryParam.setlMon"/>
        </el-form-item>
        <el-form-item label="">
          <el-button type="danger" size="mini" @click="executeRec">一键对账</el-button>
          <el-button type="primary" size="mini" @click="showDetail">查看结果</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="split-line-v"></div>
    <div class="table-container">

    </div>

    <div class="hidden-div">
      <el-drawer
        title="异常结算明细"
        size="70%"
        :visible.sync="drawerVisible" >
        <div class="table-container">
          <el-table
            ref="monthRecTable"
            :data="setlList"
            tooltip-effect="dark"
            style="width: 100%"
            stripe
            border>
            <el-table-column
              type="index"
              label="序号"
              width="80"/>
            <el-table-column
              prop="setlMon"
              label="对账月份"
              width="180"/>
            <el-table-column
              prop="psnTime"
              label="结算人次"
              width="160"/>
            <el-table-column
              prop="psnCnt"
              label="结算人数"
              width="160"/>
            <el-table-column
              prop="medfeeSumamt"
              label="医疗费总额"/>
            <el-table-column
              prop="fundPaySumamt"
              label="基金支付总金额"/>
            <el-table-column
              prop="updatetime"
              label="对账时间"
              width="200"/>
            <el-table-column
              label="对账状态"
              width="120">
              <template v-slot="scope">
                <div :class="scope.row.stmtStatus==='0'?'':scope.row.stmtStatus==='1'?'green':'red'">
                  {{ scope.row.stmtStatus === '0' ? '未对账' : scope.row.stmtStatus === '1' ? '对账成功' : '对账失败' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="申报状态"
              width="120">
              <template v-slot="scope">
                <div :class="scope.row.dclaStas==='0'?'red':scope.row.dclaStas==='1'?'green':''">
                  {{ scope.row.dclaStas === '0' ? '未申报' : scope.row.dclaStas === '1' ? '已申报' : '' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              width="240"
              label="操作">
              <template v-slot="scope">

              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-drawer>
    </div>

    <div class="hidden-div">
      <el-dialog
        title="对账进度信息"
        :visible.sync="processDlgVisible"
        :close-on-click-modal="false"
        width="32%">
        <div style="font-size: 32px;font-weight: bold;padding: 20px">
          对账操作执行中...
        </div>
      </el-dialog>
    </div>
  </div>

</template>
<!--  平台对账页面，月度列表页面 -->
<script>

  import { mapGetters } from 'vuex'
  import {dateFormat} from "../../utils/utils";

  export default {
    name: 'SetlList',
    data() {
      return {
        setlList: [],
        queryParam: {
          setlMon: dateFormat(new Date(), 'yyyyMM')
        },
        activeStep: 0,
        drawerVisible:false,
        processDlgVisible:false
      }
    },
    computed: {
      ...mapGetters([
        'wsMsg'
      ])
    },
    watch: {
      //监测onMsg
      wsMsg: {
        handler(newVal,oldVal) {

        },
        deep: true
      }
    },
    created() {
      this.loadData();
    },
    methods: {
      async loadData() {
        let tmpParam = {...this.queryParam};
        console.log("tmpParam:"+JSON.stringify(tmpParam))
      },
      async showDetail(){
        // 加载数据
        this.drawerVisible = true
      },
      async executeRec(){
        this.processDlgVisible = true;
        let that = this;
        setTimeout(function () {
          that.processDlgVisible = false;
        },3000)
      }
    }
  }
</script>

<style scoped>
  .toolbar-row {
    padding: 20px 10px;
    width: 100%;
  }

  .right {
  }

  .split-line-v {
    width: 105%;
    height: 1px;
    background: #4f4e4e;
    opacity: 0.5;
    margin: -30px 0 4px 0;
  }

  .table-container {
    margin: 15px 0 0 0;
    padding: 0 8px;
  }
</style>
